Images can be used to add interest and colour to your pages. However, the use of images should be restricted due to the time large, high quality images can take to download from a web site. Images in web pages are stored as seperate graphics files and then linked into the web page. If you want several pages to display an image, if you use the same image in each page then the time it takes to download the page is reduced as the viewer has already downloaded the image file.


Image 1

Description
This image has been imported from the mpn_logo.gif file which accompanies this file. It has been displayed using the default settings for the browser - to additional settings have been defined for the image.

How To Make It
Load the Image Wizard using the Insert | Image menu item. Click on the Browse button and select the mpn_logo.gif file. A preview of the file will be shown below the file name. Don't worry that the preview shows the image as being square - it won't be displayed like this in the browser. Ensure that the Use Relative Filename option is ticked, this makes sure that the image will be displayed even if you move both files to a different folder or upload them to a web site. This option is only available if you have already saved the web page. Click on Finish as we don't want to set any other options.


Image 2

Description
This image has been displayed from the same file as the small one in the first example, but it has had more of the available settings defined. This is a good way of displaying a large image without a large image file, so it is quicker to download.

How To Make It
Select the image file in the Image Wizard in the same way as in the first example, but before clicking on Finish, select the Use Custom Settings option. Click on the Next button. This part of the wizard includes many settings which can be changed to change how the image is displayed. The first two of these are the height and width of the image. You can either change these manually, by entering new values, or you can click on the Set button next to them to change them visually. Clicking on this button brings up a new window displaying the image. By resizing this window, you can stretch the image. Initially, you can only change the image size in proportion, so the dimentions of the image are still in the same ratio. However, you can disable this if you want by unchecking the Proprtional Resize setting. You can then stretch the image either horizontally or vertically without affecting the other dimension. You could also change the aspect ratio by entering a new value for it in the text box at the top of the window, and then you can stretch the image to a new proportion. After changing the size, click on the Done button to place the new settings in the wizard.

The next setting is the border. This defines the distance between the image and any text next to it. In this case, we can leave this set to 0.

The title of the image is some text which can describe the image if the viewer has their browser configured not to display images. In some browsers, this text is also displayed as a "hint" when the mouse is left over the image. In this case, enter "Large Image" as the title.

The final setting is the alignment. This defines how the image is placed relative to any surrounding text or other images. By selecting an option from the list, you can see a preview underneath about how this will affect the position of the image. In this case, we can align the image to the right of the page while the text runs across the left of the page.